<template>
    <Card>
        <Row slot="title">
            <!--<span>计划任务详情</span>-->
            <div style="display: inline;cursor: pointer" @click="returnLastPage" span="2">
                <Icon type="chevron-left"></Icon>
                返回
            </div>
            <Button type="primary" size="small" @click="add" style="margin-left: 10px;">添加</Button>
        </Row>
        <Table border :columns="columns" :data="data"></Table>
        <Modal
                v-model="isShowModal"
                @on-ok="modalOk"
                @on-cancel="modalCancel"
                title="计划生产任务">
            <Form v-model="formInfo">
                <FormItem label="任务名称" :label-width=100>
                    <Input placeholder="请输入任务名称" v-model="formInfo.name"></Input>
                </FormItem>

                <FormItem label="任务介绍" :label-width=100>
                    <Input placeholder="请输入任务介绍" v-model="formInfo.intro"></Input>
                </FormItem>

                <FormItem label="计划启动时间" :label-width=100>
                    <DatePicker format="yyyy-MM-dd" type="date" placeholder="请选择任务起始时间"    v-model="formInfo.planedStartTime"></DatePicker>
                </FormItem>

                <FormItem label="N(公斤)" :label-width=100>
                    <Input placeholder="请输入N肥量" v-model="formInfo.fertN" style="width: 100px"/>
                    <span style="margin-left: 60px"> P(公斤) </span>
                    <Input placeholder="请输入P肥量" v-model="formInfo.fertP"
                           style="width: 100px"/>
                </FormItem>

                <FormItem label="K(公斤)" :label-width=100>
                    <Input placeholder="请输入K肥量" v-model="formInfo.fertK" style="width: 100px"/>
                    <span style="margin-left: 30px">有机肥(公斤) </span>
                    <Input placeholder="请输入有机肥量" v-model="formInfo.fertOrganic" style="width: 100px"/>
                </FormItem>

                <FormItem label="灌水(m³)" :label-width=100>
                    <Input placeholder="请输入灌水量" v-model="formInfo.watering" style="width: 100px;"/>
                </FormItem>

                <FormItem label="状态" :label-width=100>
                    <Select v-model="formInfo.status" placement="bottom" style="width: 200px;">
                        <Option v-for="item in statusDatas" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>


            </Form>

        </Modal>
    </Card>

</template>

<script>
    export default {
        data() {
            return {
                statusDatas: [
                    "未开始",
                    "进行中",
                    "已完成",
                ],
                columns: [
                    {
                        key: 'planId',
                        title: 'Id',
                        align: 'center',
                        width: 50,
                    },
                    {
                        key: 'name',
                        title: '任务名称',
                        align: 'center',
                        width: 100,
                    },
                    {
                        key: 'intro',
                        title: '任务介绍',
                        align: 'center',
                        width: 200,
                    },
                    {
                        key: 'blockId',
                        title: '地块任务Id',
                        width: 100,
                        align: 'center'
                    },
                    {
                        key: 'fertN',
                        title: 'N肥',
                        width: 70,
                        align: 'center',
                    },
                    {
                        key: 'fertP',
                        title: 'P肥',
                        width: 70,
                        align: 'center',
                    },
                    {
                        key: 'fertK',
                        title: 'K肥',
                        width: 70,
                        align: 'center',
                    },
                    {
                        key: 'fertOrganic',
                        title: '有机肥',
                        width: 100,
                        align: 'center',
                    },
                    {
                        key: 'watering',
                        title: '浇水容量',
                        align: 'center',
                        width: 120,
                    },
                    {
                        key: 'planedStartTime',
                        title: '开始时间',
                        align: 'center',
                        width: 120,

                    },
                    {
                        key: 'status',
                        title: '状态',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 150,
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params);
                                        }
                                    },
                                }, "编辑"),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    }
                ],
                data: [
//                    {
//                        planId: 1,
//                        name: '任务001',
//                        intro: '这是任务的介绍，很简单的介绍噢',
//                        blockId: '1',
//                        fertN: 12,
//                        fertP: 13,
//                        fertK: 14,
//                        fertOrganic: 15,
//                        watering: 16,
//                        planedStartTime: "2017-09-01",
//                        status: '未开始',
//                    },
//                    {
//                        planId: 2,
//                        name: '任务002',
//                        intro: '这是任务的介绍，很简单的介绍噢',
//                        blockId: '2',
//                        fertN: 22,
//                        fertP: 33,
//                        fertK: 44,
//                        fertOrganic: 55,
//                        watering: 66,
//                        planedStartTime: "2018-09-01",
//                        status: '未开始',
//                    }
                ],
                isShowModal: false,
                modalType: 'add',//默认添加
                choseRowIndex: -1,//当前选中的编辑行

//                planId: 1,
//                name: '任务001',
//                intro: '这是任务的介绍，很简单的介绍噢',
//                blockId: '1',
//                fertN: 12,
//                fertP: 13,
//                fertK: 14,
//                fertOrganic: 15,
//                watering: 16,
//                planedStartTime: "2017-09-01",
//                status: '未开始',


                formInfo: {
                    name: '',
                    intro: '',
                    planedStartTime: '',
                    fertN: '',
                    fertP: '',
                    fertK: '',
                    fertOrganic: '',
                    watering: '',
                    status: '',
                },
            }
        },
        methods: {
            dateFormat:function (date) {
                if(!date){
                    return "";
                }
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            modalOk: function () {
                let updataData = {
                    planId: this.$store.state.planDetail[this.$store.state.planDetail.length - 1].planId + 1,
                    name: this.formInfo.name,
                    intro: this.formInfo.intro,
                    blockId: this.$store.state.planDetail[this.$store.state.planDetail.length - 1].blockId + 1,
                    fertN: this.formInfo.fertN,
                    fertP: this.formInfo.fertP,
                    fertK: this.formInfo.fertK,
                    fertOrganic: this.formInfo.fertOrganic,
                    watering: this.formInfo.watering,
                    planedStartTime:this.dateFormat(this.formInfo.planedStartTime),
                    status: this.formInfo.status,
                }
                if (this.modalType == 'add') {
                    this.$store.commit('setPlanDetail', updataData)
                } else {
                    this.$set(this.data, this.choseRowIndex, updataData);
                }

            },
            modalCancel: function () {
                this.formInfo.name = "";
                this.formInfo.intro = "";
                this.formInfo.planedStartTime = '';
                this.formInfo.fertN = '';
                this.formInfo.fertP = '';
                this.formInfo.fertK = '';
                this.formInfo.fertOrganic = '';
                this.formInfo.watering = '';
                this.formInfo.status = '';
            },
            add: function () {
                this.modalCancel();
                this.modalType = 'add';
                this.isShowModal = true;
            },
            delete:function (params) {
                this.data.splice(params.index,1);
            },
            edit:function (params) {
                this.choseRowIndex=params.index;
                this.modalType='edit';
                var rowData=this.data[params.index];
                //赋值
                this.formInfo.name = rowData.name;
                this.formInfo.intro = rowData.intro;
                this.formInfo.planedStartTime = rowData.planedStartTime;
                this.formInfo.fertN = rowData.fertN;
                this.formInfo.fertP = rowData.fertP;
                this.formInfo.fertK = rowData.fertK;
                this.formInfo.fertOrganic = rowData.fertOrganic;
                this.formInfo.watering = rowData.watering;
                this.formInfo.status = rowData.status;
                this.isShowModal=true;
            },
            returnLastPage: function () {
                window.history.go(-1)
            }
        },
        created(){
            this.data=this.$store.state.planDetail;
        }

    }

</script>